<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>牛牛商城-我的订单</title>
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.pagination.css">
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
{#   <script type="text/javascript" src="/static/js/host.js"></script#}
    <script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.map.js"></script>
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/common.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="header_con" style="cursor: pointer;">
        <div class="header">
            <div class="welcome fl">欢迎来到牛牛商城!</div>
            <div class="fr">
                <div v-if="username" class="login_btn fl">
                    欢迎您：<em>[[ username ]]</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
                <div v-else class="login_btn fl">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:register') }}">注册</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="{{ url('users:info') }}">用户中心</a>
                    <span>|</span>
                    <a href="{{ url('carts:info') }}">我的购物车</a>
                    <span>|</span>
                    <a href="/orders/info/1">我的订单</a>
{#                    <a href="user_center_order.html">我的订单</a>#}
                </div>
            </div>
        </div>
    </div>

    <div class="search_bar clearfix">
        <a href="{{ url('contents:index') }}" class="logo fl">
            <img src="{{ static('images/logo.png') }}"style="width:120px;height:100px;margin-left:80px;"></a>
        <div class="search_wrap fl">
            <form method="get" action="/search/" class="search_con" style="border-radius: 15px;">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索" style="border-radius: 12px;cursor: pointer;">
            </form>
            <ul class="search_suggest fl">
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.8.19f3468aBw7c3q&refpid=mm_26632258_3504122_32538762&keyword=%E9%98%BF%E7%8E%9B%E5%B0%BC&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.27.3.176_5215617_1626312332372">阿玛尼</a></li>
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.10.6492468a9mffzJ&refpid=mm_26632258_3504122_32538762&keyword=%E7%BD%AE%E7%89%A9%E6%9E%B6&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.0.174.53_5219429_1626312544595">置物架</a></li>
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.search.1&refpid=mm_26632258_3504122_32538762&keyword=%E6%B0%B4%E6%9D%AF&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.175.82.69_5222560_1626312787312">水杯</a></li>
                <li><a href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.search.1&refpid=mm_26632258_3504122_32538762&keyword=%E8%80%B3%E6%9C%BA&clk1=b97410d2f6947cb48f5e6cb9d182522a&upsId=b97410d2f6947cb48f5e6cb9d182522a&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_11.170.87.36_5100233_1626270140072%3Bprepvid%3A201_11.20.207.176_5218136_1626312845070">耳机</a></li>
            </ul>
        </div>
    </div>

    <div class="main_con clearfix">
        <div class="left_menu_con clearfix">
            <h3>用户中心</h3>
            <ul>
				<li><a href="{{ url('users:info') }}">· 个人信息</a></li>
				<li><a href="{{ url('users:address') }}" >· 收货地址</a></li>
{#                <li><a href="user_center_order.html" class="active">· 全部订单</a></li>#}
                <li><a href="/orders/info/1" class="active">· 我的订单</a></li>
                <li><a href="{{ url('users:pass') }}">· 修改密码</a></li>            </ul>
        </div>
        <div class="right_content clearfix">
            <h3 class="common_title2">全部订单</h3>
            {% for order in page_orders %}
            <ul class="order_list_th w978 clearfix">
                <li class="col01">{{ order.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</li>
                <li class="col02">订单号：{{ order.order_id }}</li>
            </ul>
            <table class="order_list_table w980">
                <tbody>
                    <tr>
                        <td width="55%">
                            {% for sku in order.sku_list %}
                            <ul class="order_goods_list clearfix">
                                <li class="col01"><img src="{{ sku.default_image.url }}" style="border: 0px;"></li>
                                <li class="col02"><span>{{ sku.name }}</span>
{#                                    <em>{{ sku.price }}元</em>#}
                                </li>
                                <li class="col03">{{ sku.count }}</li>
                                <li class="col04">{{ sku.amount }}元</li>
                            </ul>
                            {% endfor %}
                        </td>
                        <td width="15%">{{ order.total_amount }}元<br>含运费：{{ order.freight }}元</td>
                        <td width="15%">{{ order.pay_method_name }}</td>
                        <td width="15%">
                            <a @click="oper_btn_click('{{ order.order_id }}', {{ order.status }})" class="oper_btn" style="border-radius: 12px;background-color: #FF3366;color:white;cursor:pointer;">{{ order.status_name }}</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            {% endfor %}
            <div class="pagenation">
                <div id="pagination" class="page"></div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2021 重庆勇敢牛牛商业股份有限公司 All Rights Reserved</p>
        <p>电话：5208208820 渝ICP备*******8号</p>
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery.pagination.min.js"></script>
<script type="text/javascript" src="/static/js/user_center_order.js"></script>
<script>
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{ total_page }},
            callback: function (current) {
                {#location.href = '/orders/info/' + current + '/';#}
                location.href = '/orders/info/1/';
            }
        })
    });
</script>
</body>
</html>